import React from 'react';
import ReactDOM from 'react-dom';

interface Props {
  name: string;
}

interface State {
  number: number;
  x?: string;
}

class Clock extends React.Component<Props, State> {
  state = {number: 0};

  add = (event: React.MouseEvent) => {
    this.setState({number: this.state.number + 1});
  };

  render() {
    return (
      <div>
        <p>父亲的状态:{this.state.number}</p>
        <hr/>
        <SubCounter {...this.props} {...this.state} add={this.add}/>
      </div>
    );
  }
}

type SubCounterProps = Props & State & { add: any };
const SubCounter: React.FunctionComponent<SubCounterProps>/*这里声明了，就不需要在后面的function的props声明了*/ = function (props/*: SubCounterProps*/) {
  return (
    <>
      <p>儿子</p>
      <div>{props.name}:{props.number}</div>
      <button onClick={props.add}>儿子按钮+</button>
    </>
  )
};

/*class SubCounter2 extends React.Component<Props & State & { add: any }> {
    render() {
        return (
            <>
                <p>儿子</p>
                <div>{this.props.name}:{this.props.number}</div>
                <button onClick={this.props.add}>儿子按钮+</button>
            </>
        )
    }
}*/

ReactDOM.render(<Clock name={'计数器'}/>, document.getElementById('root'));
